import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入store
import store from '@/store'

// 引入路由中需要用到的组件
import Login from '@/views/login/index'
import ErrorPage from '@/views/error-page/index'

Vue.use(VueRouter)

// 路由规则
// 添加需要认证的requireAuth信息
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'layout' */ '@/views/layout/index'),
    // 直接给某个路由设置，这时内部的子路由都需要验证（包括当前路由）
    // meta: {
    //   requiresAuth: true
    // },
    children: [
      {
        path: '',
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName: 'role' */'@/views/role/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName: 'role' */'@/views/role/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName: 'menu' */'@/views/menu/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/createMenu',
        name: 'createMenu',
        component: () => import(/* webpackChunkName: 'createMenu' */'@/views/menu/createMenu.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/menu/:id/edit',
        name: 'menu-edit',
        component: () => import(/* webpackChunkName: 'MenuEdit' */'@/views/menu/edit.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/role/:roleId/alloc-menu',
        name: 'alloc-menu',
        component: () => import(/* webpackChunkName: 'alloc-menu' */'@/views/role/alloc-menu.vue'),
        meta: { requiresAuth: true },
        props: true
      },
      {
        path: '/resource',
        name: 'resource',
        component: () => import(/* webpackChunkName: 'resource' */'@/views/resource/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/course',
        name: 'course',
        component: () => import(/* webpackChunkName: 'course' */'@/views/course/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/course/create',
        name: 'courseCreate',
        component: () => import(/* webpackChunkName: 'course-create' */'@/views/course/create'),
        meta: { requiresAuth: true }
      },
      {
        path: '/course/:courseId/section',
        name: 'course-section',
        component: () => import(/* webpackChunkName: 'course-section' */'@/views/course/section'),
        meta: { requiresAuth: true },
        props: true
      },
      {
        path: '/course/:courseId/video',
        name: 'course-video',
        component: () => import(/* webpackChunkName: 'course-video' */'@/views/course/video'),
        meta: { requiresAuth: true },
        props: true
      },
      {
        path: '/course/:courseId/edit',
        name: 'courseEdit',
        component: () => import(/* webpackChunkName: 'course' */'@/views/course/edit'),
        props: true,
        meta: { requiresAuth: true }
      },
      {
        path: '/user',
        name: 'user',
        component: () => import(/* webpackChunkName: 'user' */'@/views/user/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/advert',
        name: 'advert',
        component: () => import(/* webpackChunkName: 'advert' */'@/views/advert/index'),
        meta: { requiresAuth: true }
      },
      {
        path: '/advert/:id/edit',
        name: 'advert-edit',
        component: () => import(/* webpackChunkName: 'AdvertEdit' */'@/views/advert/edit.vue'),
        props: true,
        meta: { requiresAuth: true }
      },
      {
        path: '/advert/create',
        name: 'AdvertCreate',
        component: () => import(/* webpackChunkName: 'advert-create' */'@/views/advert/add'),
        meta: { requiresAuth: true }
      },
      {
        path: '/advertSpace',
        name: 'advertSpace',
        component: () => import(/* webpackChunkName: 'advert-space' */'@/views/advert-space/index')
      },
      {
        path: '/advertSpace/add',
        name: 'advertSpaceAdd',
        component: () => import(/* webpackChunkName: 'advert-space-add' */'@/views/advert-space/add')
      },
      {
        path: '/advertSpace/:id/edit',
        name: 'advertSpaceEdit',
        props: true,
        component: () => import(/* webpackChunkName: 'advert-space-edit' */'@/views/advert-space/edit')
      }
    ]
  },
  {
    path: '*',
    name: 'errorPage',
    component: ErrorPage
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 验证to路由是否需要进行身份验证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 验证vuex中store中的登录用户信息是否存在
    console.log(store.state, 'store.state=====')
    if (!store.state.user) {
      // 未登录，跳转到登录页
      console.log(to.fullPath, 'fullPath')
      return next({
        name: 'login',
        query: {
          // 将本次路由的fullpath传递给login页面
          redirect: to.fullPath
        }
      })
    }
    // 已登录，允许通过
    next()
  } else {
    console.log(to, 'to')
    console.log('不需要认证')
    next()
  }
})

export default router
